<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <!--<FormItem>-->
    <Row>
      <Col span="10">
      <FormItem prop="name" label="姓名:">
        <Input v-model="formValidate.name" placeholder="请输入你的姓名"></Input>
      </FormItem>
      </Col>

      <Col span="10">
      </Col>
    </Row>

    <Row>
      <Col span="10">
      <FormItem prop="qq" label="QQ/微信:">
        <Input v-model="formValidate.qq" placeholder="请输入你的QQ号码或者微信号码"></Input>
      </FormItem>
      </Col>

      <Col span="10">

      </Col>
    </Row>
    <Row>
      <Col span="10">
      <FormItem prop="home" label="家庭住址:">
        <Input v-model="formValidate.home" placeholder="请输入家庭住址"></Input>
      </FormItem>
      </Col>

      <Col span="10">

      </Col>
    </Row>

    <Row>
      <Col span="10">
      <FormItem label="关系:" prop="guanxi">
        <Input v-model="formValidate.guanxi" placeholder="请输入亲戚关系"></Input>
      </FormItem>
      </Col>
      <Col span="10">
      </Col>
    </Row>
    <Row>
      <Col span="10">
      <FormItem label="工作:" prop="job">
        <Input v-model="formValidate.job" placeholder="Enter your name"></Input>
      </FormItem>
      </Col>
      <Col span="10">
      </Col>
    </Row>

    <Row>
      <Col span="10">
      <FormItem prop="birthday" label="生日:">
        <DatePicker type="date" placeholder="请选择日期" v-model="formValidate.birthday"></DatePicker>
      </FormItem>
      </Col>

      <Col span="10">

      </Col>
    </Row>
    <Row>
      <Col span="10">
      <FormItem label="性别:" prop="sex">
        <RadioGroup v-model="formValidate.sex">
          <Radio label="男">男</Radio>
          <Radio label="女">女</Radio>
        </RadioGroup>
      </FormItem>
      </Col>

      <Col span="10">

      </Col>
    </Row>
    <Row>
      <Col span="10">
      <FormItem label="头像:" prop="touxiang">
        <upload ref="picref"></upload>
      </FormItem>
      </Col>

      <Col span="10">

      </Col>
    </Row>

    <FormItem>
      <Button type="primary" @click="handleSubmit()">提交</Button>
      <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
      <div style="height: 50px;width: 100px">
        <router-link :to="home">
          <div>
            <Button type="primary" >
              返回
            </Button>
          </div>
        </router-link>
      </div>
    </FormItem>

  </Form>
</template>

<script>
  import upload from  '../utils/share_upload_pic';
  // import upload from  '../person/person_list.vue';
  export default {
    data () {
      return {
        home:'home',
        formValidate: {
          name: '',
          qq: '',
          sex: '',
          home: '',
          birthday: '',
          guanxi: '',
          job: '',
          touxiangurl: ''
        },
        ruleValidate: {
          name: [
            { required: true, message: '姓名不能为空！', trigger: 'blur' }
          ],
        }
      }
    },
    created(){
      this.selectById();
    },
    components: {
      upload
    },
    methods: {
      selectById(){

      },
      handleSubmit () {
        let self=this;
        console.log("self.formValidate====",self.formValidate);
        console.log("file......................",this.$refs.picref.file);
        console.log("file......................",this.$refs.picref.file.realurl);
        self.formValidate.touxiangurl=this.$refs.picref.file.realurl;
        this.$http.post("/api/person/save/",self.formValidate)
          .then(response => {
            if(response.data.code==500){
              alert("保存成功！");
              this.$router.replace({ path: '/home'})
            }
            else{
              alert("保存失败！");

            }
          }, response => {
            console.log("获取信息失败");
            alert("保存失败！");
          })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      }
    }
  }
</script>
